<script>
	import {
		defineComponent,
		reactive,
		computed,ref
	} from 'vue';
	import { useRouter } from "vue-router"
	import { useStore } from "vuex"
	import {
		UserOutlined,
		LockOutlined,
		SafetyOutlined
	} from '@ant-design/icons-vue';
	import { message } from 'ant-design-vue';
	import { getCodeImg , apiLogin } from "@/api/login"
	import { setToken } from "@/utils/cookie.js"
	import settings from "@/settings"
	export default defineComponent({
		components: {
			UserOutlined,
			LockOutlined,
			SafetyOutlined
		},

		setup() {
			const router = useRouter()
			const store = useStore()
			const title = settings.title
			//验证码相关
			const codeImg = ref("");
			const changeCode = ()=>{
				codeImg.value = 'http://api.xuexiareas.com/captcha.html?'+Math.random()
			}
			changeCode();//初始化验证码
			
			//表单相关
			const formState = reactive({
				username: '',
				password: '',
				code: '',
				remember: true,
			});
			const onFinish = values => {
				apiLogin(formState).then(e=>{
					e = e.data;
					if(e.code == 200){
						setToken(e.data.token);//写入token
						store.commit("userChange",{
							"name":e.data.name,
							"headImg":e.data.headImg,
						})
						router.push({path:'/'})//跳转首页
						message.success(e.msg);//信息提示
					}else{
						message.error(e.msg);
					}
				})
				
			};

			const onFinishFailed = errorInfo => {
				console.log('Failed:', errorInfo);
				
			};

			const disabled = computed(() => {
				return !(formState.username && formState.password && formState.code);
			});
			return {
				title,
				formState,
				onFinish,
				onFinishFailed,
				disabled,
				changeCode,
				codeImg
			};
		},

	});
</script>

<template>
	<div class="login-box">
		<div>
			<h1 class="text-center">{{title}}</h1>


			<a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish"
				@finishFailed="onFinishFailed">
				<a-form-item name="username" :rules="[{ required: true, message: '请输入账号!' }]">
					<a-input size="large" v-model:value="formState.username">
						<template #prefix>
							<UserOutlined class="site-form-item-icon" />
						</template>
					</a-input>
				</a-form-item>

				<a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
					<a-input-password size="large" v-model:value="formState.password">
						<template #prefix>
							<LockOutlined class="site-form-item-icon" />
						</template>
					</a-input-password>
				</a-form-item>
				
				<div class="codeBox">
					<div class="codeBox-input">
						<a-form-item  name="code"
							:rules="[{ required: true, message: '请输入验证码!' }]">
							<a-input class="codeBox-input" size="large" v-model:value="formState.code" style="flex:1">
								<template #prefix>
									<SafetyOutlined class="site-form-item-icon" />
								</template> 
							</a-input>
						</a-form-item>
					</div>
					<div class="codeBox-codeImg">
						<img @click="changeCode" :src="codeImg"
								alt="">
					</div>
				</div>

				<a-button size="large" :disabled="disabled" type="primary" html-type="submit" block class="login-form-button">
					登录
				</a-button>
			</a-form>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.login-box {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #001529;

		h1 {
			margin-bottom: 20px !important;
			color: #fff;
			font-weight: bold;
			font-size: 1.4rem;
			letter-spacing: 5px;
		}
		.codeBox-input{
			
		}
		.codeBox {
			position: relative;
			display: flex;
			&-input{
				flex: 1;
				margin-right: 5px;
			}
			&-codeImg {
				width: 100px;
				height: 40px;
				img {
					width: 100%;
					height: 40px;
					cursor: pointer;
				}
			}
		}
	}

	.login-form {
		background: #fff;
		width: 350px;
		border-radius: 10px;
		display: block;
		margin: 0 auto;
		padding: 40px 20px;
	}

</style>
